<template>
  <div>
      <!-- 展示选中图片的区域
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%"
             :src="model.imageUrl"
             alt="">
      </el-dialog> -->
      <!--elementui的form组件-->
    <el-form label-width="120px">
      <el-form-item label="id">
        <el-input v-model="model.id"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="model.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="model.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="model.email"></el-input>
      </el-form-item>
      <el-form-item label="QQ号码">
        <el-input v-model="model.qqNumber"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="model.telephone"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <!-- <el-input v-model="model.avatar"></el-input> -->
         <el-avatar :size="200"  :src= "model.avatar"></el-avatar>
      </el-form-item>
      <el-form-item label="添加新头像">
        <!--elementui的上传图片的upload组件-->
      <el-upload class="upload-demo"
                 ref="upload"
                 list-type="picture-card"
                 action="/api/user"
                 :limit="9"
                 :before-upload="beforeupload"
                 :on-exceed="exceedHandle"
                 :auto-upload="false"
                 :multiple='true'>
        <i class="el-icon-plus"></i>
      </el-upload>
      </el-form-item>
      <el-input v-model="model._method" type="hidden"></el-input>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from 'axios'
axios.defaults.withCredentials = true // 引入axios
export default {
  props: {
    id: {}
  },
  data() {
    return {
      model: {
        id:"",
        password:"",
        name:"",
        telephone:"",
        qqNumber:"",
        email:""
      },
      param: '',
      hasImg: false
    };
  },
  methods: {
    beforeupload(file) {
      this.hasImg = true
      this.param = new FormData()
      this.param.append('upload', file)
      return false
    },
    async save() {
      // let res;
      // if (this.id) {
      //   this.model._method = "put";
      //   res = await this.$http.post("/user", this.model);
      // } else {
      //   res = await this.$http.post("/user", this.model);
      // }
      if(this.hasImg === false){
        this.param = new FormData()
      }
      let _this = this
      _this.$refs.upload.submit()
      if (this.id) {
        this.param.append('_method',"put")
      }
      this.param.append('id', _this.model.id)
      this.param.append('password', _this.model.password)
      this.param.append('name', _this.model.name)
      this.param.append('telephone', _this.model.telephone)
      this.param.append('qqNumber', _this.model.qqNumber)
      this.param.append('email', _this.model.email)    
      // 4.3，然后通过下面的方式把内容通过axios来传到后台
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          "Authorization": localStorage.token || ''
        }
      }
      console.log(this.param)
      const res = await axios.post('/api/user', this.param, config)
      if(res.data.code === 3001){
        this.$message({
        type: "warning",
        message: "保存失败"
      });
      return
      }
      this.$message({
        type: "success",
        message: "保存成功"
      });
      this.$router.push("/custom_users/list");
    },
    async fetch() {
      const res = await this.$http.get(`/user/${this.id}`);
      this.model = res.data.info;
      this.model.avatar = "http://121.199.23.187:8080/static/images/avatar/"+this.model.avatar
      console.log(this.model.avatar)
    },
    handleChange(file, fileList) {
      this.model.imageUrl = URL.createObjectURL(file.raw);
    },
    // 5设置超过9张图给与提示
    exceedHandle () {
      alert('您现在选择已超过9张图，请重新选择')
    }
  },

  created() {
    this.id && this.fetch();
  }
};
</script>
<style>
    input[type="file"] {
        display: none;
    }
 
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
 
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
 
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
 
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>


